<template>
  <div class="enterpriseInfo">
    <div>
      <div class="title">
        <h1 style="color: #337ECC;font-size: 40px">企业信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <TagOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #337ECC; padding: 20px;border-top: 30px solid #337ECC; border-radius: 10px">


      <div style="display: flex;  justify-content: space-between;">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="企业名称">{{ formState.enterpriseName }}</a-descriptions-item>
            <a-descriptions-item label="审核状态">{{ formState.enterpriseCertificationStatus }}</a-descriptions-item>
            <a-descriptions-item label="企业所属行业">{{ formState.enterpriseIndustry }}</a-descriptions-item>
            <a-descriptions-item label="企业规模">{{ formState.enterpriseSize }}</a-descriptions-item>
            <a-descriptions-item label="企业成立时间">{{ formattedFoundationDate }}</a-descriptions-item>
            <a-descriptions-item label="企业性质">{{ formState.enterpriseType }}</a-descriptions-item>
            <a-descriptions-item label="企业官网">{{ formState.enterpriseWebsite }}</a-descriptions-item>
            <a-descriptions-item label="社交媒体">{{ formState.enterpriseSocialMediaLinks }}</a-descriptions-item>
            <a-descriptions-item label="企业邮箱">{{ formState.enterpriseEmail }}</a-descriptions-item>
            <a-descriptions-item label="企业地址">{{ formState.enterpriseAddress }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div style="
        display: flex;
        justify-content: center;
        align-items: center;"
        >
          <img
              :src="'http://localhost:8080/file/download?name='+formState.enterpriseLogoUrl"
              alt="avatar" style="width: 200px; height: 200px; border-radius: 50%;border: 2px solid #337ECC"
          />
        </div>
      </div>
      <a-descriptions title="企业简介">
        <a-descriptions-item label="简介">
          <span v-html="truncateText(formState.enterpriseProfile)"></span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>
<script setup>


import {computed, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {message} from "ant-design-vue";
import {CopyOutlined, TagOutlined, UserOutlined} from "@ant-design/icons-vue";
import {queryInformationByIdAPI} from "@/apis/enterprise.js";

// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};


const route = useRoute()
//定义数据
const formState = reactive({
  enterpriseId: '',
  enterpriseUserId: '',
  enterpriseName: '',
  enterpriseStatus: '',
  enterpriseSize: '',
  enterpriseIndustry: '',
  enterpriseType: '',
  enterpriseLogoUrl: '',
  enterpriseFoundationDate: '',
  enterpriseProfile: '',
  enterpriseAddress: '',
  enterpriseEmail: '',
  enterpriseWebsite: '',
  enterpriseCertificationStatus: '',
  enterpriseSocialMediaLinks: '',
});

//获取数据
const getData = async (enterpriseId) => {
  const res = await queryInformationByIdAPI(enterpriseId)
  formState.enterpriseId = res.data.data.enterpriseId;
  formState.enterpriseUserId = res.data.data.enterpriseUserId;
  formState.enterpriseName = res.data.data.enterpriseName;
  formState.enterpriseStatus = res.data.data.enterpriseStatus;
  formState.enterpriseLogoUrl = res.data.data.enterpriseLogoUrl;
  formState.enterpriseProfile = res.data.data.enterpriseProfile;
  formState.enterpriseIndustry = res.data.data.enterpriseIndustry;
  formState.enterpriseSize = res.data.data.enterpriseSize;
  formState.enterpriseFoundationDate = res.data.data.enterpriseFoundationDate;
  formState.enterpriseType = res.data.data.enterpriseType;
  formState.enterpriseAddress = res.data.data.enterpriseAddress;
  formState.enterpriseEmail = res.data.data.enterpriseEmail;
  formState.enterpriseWebsite = res.data.data.enterpriseWebsite;
  formState.enterpriseCertificationStatus = res.data.data.enterpriseCertificationStatus;
  formState.enterpriseSocialMediaLinks = res.data.data.enterpriseSocialMediaLinks;

}

//时间格式处理
const formattedFoundationDate = computed(() => {
  const date = new Date(formState.enterpriseFoundationDate);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});


//接收路由参数
const enterpriseId = ref();
// 生命周期
onMounted(() => {
  enterpriseId.value = route.params.enterpriseId;
  getData(enterpriseId.value)
});
</script>
<style scoped>
.enterpriseInfo {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

}


</style>